
$--input-height:46px;
$--input-border-radius:3px;
$--input-border: #999;
$--input-font-color:#333;

$--color-danger:#F56C6C;
$--form-label-font-size:14px;
$--font-size-base:14px;
$--color-text-regular:#333;
$--input-placeholder-color:#999;
$--input-hover-border:#333;
$--input-focus-border:#F56C6C;
$--label-width:80px;
$--input-background-color:#fff;


$--border-transition-base:border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

  
@include b(form) {

}

@include b(form-item) {
  display: flex;
  align-items: center;
  &.top{
    align-items: flex-start;
  }
  margin-bottom: 10px;
  @include e(label) {
    text-align: right;
    vertical-align: middle;
    font-size: $--form-label-font-size;
    color: $--color-text-regular;
    line-height: 40px;
    padding: 0 12px 0 0;
    box-sizing: border-box;
    min-width: $--label-width;
  }
  @include m(block) {
    flex-direction: column;
    @include e(label) {
      text-align:left;
    }
   } 

  @include e(content) {
    flex:1;
  }
  @include m(flex-end){
    justify-content: flex-end;
  }
  @include e(error) {
    color: $--color-danger;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
    position: absolute;
    top: 100%;
    left: 0;
  }
  &.is-required{
       &:after{
        content: '*';
        color: #F56C6C;
        margin-left: 4px;
       }
     }
  
}


@include b(inner) {
  display: block;
  resize: vertical;

  line-height: $--input-height;

  box-sizing: border-box;
  width: 100%;
  font-size: inherit;
  color: $--input-font-color;
  background-color: $--input-background-color;
  background-image: none;
  border:1px solid  $--input-border;
  border-radius: $--input-border-radius;
  transition: $--border-transition-base;
  display: flex;
  align-items: center;
  position: relative;
 
  &::placeholder {
    color: $--input-placeholder-color;
  }

  &:hover {
    border-color: $--input-hover-border;
  } 

  &:focus,&.xh-form-danger {
    outline: none;
    border-color: $--input-focus-border;
  }
  select{
    border: none;
    height: 100%;
    line-height: $--input-height;
    height: $--input-height; 
    width: 100%;
    padding: 0px 15px;
    @include scrollBar(#ccc,$base,2px,2px);
    option{
      font-size: inherit;
      line-height: $--input-height;
    }
  }
}

@include b(input) {
  line-height: $--input-height;
  height: $--input-height;
  flex:1;
  border: none; 
  width: 100%;
  padding: 0px 15px;
  overflow: hidden;
  background-color: transparent;
  &:focus{
    outline: 0;
    border: none;
  }
  @include m(prefix){
    font-size: 14px;
    position: relative;
    left: -5px;
    padding: 0px 5px;
    i{
      width: 20px;
      display: inline-block;
      font-size: 18px;
      vertical-align: middle;
    }
    &::before{
      font-size: 20px;
      vertical-align: middle;
      margin-right: 8px;
    }
    
  }
} 

@include b(textarea) {
  line-height: $--input-height;
  height: $--input-height *3;
  flex:1;
  border: none; 
  padding: 0px 15px;
  overflow: hidden;
  font-family: "Microsoft Yahei", '楷体', '新宋体', Arial, Helvetica; 
  background-color: transparent;
  &:focus{
    outline: 0;
    border: none;
  }
  @include m(prefix){
    font-size: 14px;
    position: relative;
    left: -5px;
    padding: 0px 5px;
    i{
      width: 20px;
      display: inline-block;
      font-size: 18px;
      vertical-align: middle;
    }
    &::before{
      font-size: 20px;
      vertical-align: middle;
      margin-right: 8px;
    }
    
  }
}
@include b(btn) {
   line-height:$--input-height ;
   height: $--input-height;
   width: 100%;
   background-color: $base;
   border: none;
   color: #fff;
   font-size: 16px;
   border-radius: 5px;
   cursor: pointer;
   padding: 0px 24px;
   @include m(inline){
     width: auto;
   }
 
}